Dynamic HTML overview

The ability to change style or positioning properties with a scripting language is what is commonly called dynamic HTML, or DHTML. Dreamweaver has four DHTML-related features: Layers, Styles, Timelines, and Behaviors. DHTML features work only in 4.0 or later browsers. (Internet Explorer 3.0 partially supports style sheets.)


Layers
The term "layer" was introduced by Netscape to refer to its LAYER and ILAYER tags. In Dreamweaver, "layer" means any element that can be positioned at exact coordinates on the page. Positioning properties include left and top (x and y coordinates, respectively), z-index (also called the stacking order), and visibility. Positioned elements can be defined with the DIV, SPAN, LAYER, or ILAYER tags.

Positioned elements created with DIV and SPAN are commonly referred to as "CSS layers" or "CSS-P elements" because their positioning properties are defined by the World Wide Web Consortium's Cascading Style Sheets Positioning specification (CSS-P). Both Microsoft and Netscape support CSS layers in their 4.0 browsers. Only Netscape Navigator 4.0 or later supports positioned elements created with the LAYER and ILAYER tags. See Layers overview.


Style sheets
The World Wide Web Consortium is also responsible for the Cascading Style Sheets specification (CSS1), which defines style properties (for example, font, color, padding, margin, word spacing) that control the appearance of elements. Dreamweaver allows you to set any CSS1 property. See Style sheets overview.

In Microsoft Internet Explorer 4.0, you can change the positioning and style properties of elements after the page has loaded with a scripting language such as JavaScript or VBScript. In Netscape Navigator 4.0, you cannot change style properties after the page has loaded, but you can change positioning properties.


Timelines
Timelines make it easy to create DHTML animation by automatically generating the JavaScript that changes the position or visibility of a layer or the source of an image over time. Timelines create animations that require neither Java nor plug-ins. See also Timeline overview.


Behaviors
Behaviors are the combination of an event (for example, when the pointer passes over a link, when the page loads, or when a form field loses focus) and a JavaScript action (for example, opening a new window, playing a sound, or changing an image source). See also Behaviors overview.

Dreamweaver includes several actions that affect style and positioning properties, including Show/Hide Layers, Swap Image, Change Property, and the three Timeline actions (Go to Timeline Frame, Stop Timeline, and Play Timeline). Actions can be triggered by an event on the page (for example, the user clicking a button) or from a timeline. See also Using behaviors in timelines.